<template>
  <div class="user">
    <list class="user_list">
      <cell class="user_cell user_top">
        <image class="user_top_img" src="../src/assets/img/1.jpg" ></image>
        <div class="user_top_center">
          <text class="user_top_name">HAN</text>
          <div class="user_top_time">
            <text class="user_top_center_text">有效期至：</text>
            <text class="user_top_center_text">2019-01-01</text>
          </div>
        </div>
        <button class="user_top_right">
          <text class="user_top_right_text" @click="index">个人信息</text>
        </button>
      </cell>
      <cell class="user_cell user_reward">
        <div class="user_reward_show">
          <div class="user_reward_showOn user_reward_left">
            <text class="user_reward_showOn_title">可提现奖励</text>
            <text class="user_reward_showOn_number">0.00</text>
          </div>
          <div class="user_reward_showOn user_reward_center">
            <text class="user_reward_showOn_title">累计奖励</text>
            <text class="user_reward_showOn_number">10000.00</text>
          </div>
          <div class="user_reward_showOn user_reward_right">
            <text class="user_reward_showOn_title">今日奖励</text>
            <text class="user_reward_showOn_number">100.00</text>
          </div>
        </div>
        <div class="user_reward_btn" @click="setWeixin">
          <text class="user_reward_btn_text">全部提现</text>
        </div>
      </cell>
      <cell class="user_cell user_month">
        <a class="user_month_a user_month_this" @click="getWeixin">
          <div class="user_month_this_left">
            <text class="user_month_text user_month_this_left_text">本月奖励</text>
          </div>
          <div class="user_month_this_right">
            <text class="user_month_text user_month_this_right_textMoney">{{money}}</text>
            <text class="user_month_text user_month_this_right_textUnit">元</text>
          </div>          
        </a>
        <a class="user_month_a" @click="removeWeixin">
          <div class="user_month_this_left">
            <text class="user_month_text user_month_this_left_text">每月奖励金额</text>
          </div>
          <div class="user_month_this_right">
            <text class="user_icon user_month_icon">&#xe603;</text>
          </div>          
        </a>
        <a class="user_month_a" @click="getUser">
          <div class="user_month_this_left">
            <text class="user_month_text user_month_this_left_text">提现记录</text>
          </div>
          <div class="user_month_this_right">
            <text class="user_icon user_month_icon">&#xe603;</text>
          </div>          
        </a>
      </cell>
      <cell class="user_cell user_sub">
        <a class="user_sub_a user_sub_friend">
          <div class="user_sub_left">
            <text class="user_icon user_sub_icon_left">&#xe62c;</text>
            <text class="user_sub_text">我的好友</text>
          </div>
          <div class="user_sub_right">
            <text class="user_sub_text user_sub_text_right">{{friend}}个好友</text>
            <text class="user_icon user_sub_icon_right">&#xe603;</text>
          </div>
        </a>
        <a class="user_sub_a">
          <div class="user_sub_left">
            <text class="user_icon user_sub_icon_left">&#xe614;</text>
            <text class="user_sub_text">奖励明细</text>
          </div>
          <div class="user_sub_right">
            <text class="user_sub_text user_sub_text_right">总{{reward}}次奖励</text>
            <text class="user_icon user_sub_icon_right">&#xe603;</text>
          </div>
        </a>
        <a class="user_sub_a">
          <div class="user_sub_left">
            <text class="user_icon user_sub_icon_left">&#xe65a;</text>
            <text class="user_sub_text">我的二维码</text>
          </div>
          <div class="user_sub_right">
            <text class="user_sub_text user_sub_text_right">分享二维码</text>
            <text class="user_icon user_sub_icon_right">&#xe603;</text>
          </div>
        </a>
        <a class="user_sub_a">
          <div class="user_sub_left">
            <text class="user_icon user_sub_icon_left">&#xe62a;</text>
            <text class="user_sub_text">来自陈安之老师的祝福</text>
          </div>
          <div class="user_sub_right">
            <text class="user_icon user_sub_icon_right">&#xe603;</text>
          </div>
        </a>
        <a class="user_sub_a">
          <div class="user_sub_left">
            <text class="user_icon user_sub_icon_left_last">&#xe60d;</text>
            <text class="user_sub_text">【分享大使】约定</text>
          </div>
          <div class="user_sub_right">
            <text class="user_icon user_sub_icon_right">&#xe603;</text>
          </div>
        </a>
      </cell>
      <cell class="user_cell user_qrcode">
        <image class="user_qrcode_img" src="../src/assets/img/qrcode.jpg" ></image>
        <text class="user_qrcode_text">关注二维码</text>
        <text class="user_qrcode_text">看更多《成功密码》</text>
      </cell>
      <cell class="user_cell" style="width: 750px;height: 200px;">
        <text>{{money}}</text>
        <text>login是：{{login}}</text>
        <text>微信是：{{weixin}}</text>
        <!-- <text>name是：{{name}}</text> -->
      </cell>  
    </list>
  </div>
</template>

<style scoped>
  .user{width: 750px;}
  .user_list{width: 750px;}
  .user_cell{width: 750px;}
  .user_icon{font-family: iconfont;color: #7D7D7D;}  
  /*第一部分*/
  .user_top{flex-direction: row;align-items: center;justify-content: space-between;border-bottom-width:1px;border-bottom-style: solid;border-bottom-color: #B4B4B5;padding: 20px 25px;box-shadow: 0px 14px 0px rgba(0, 0, 0, 0.2);background-color: #fff;}
  .user_top_img{width: 120px;height: 120px;border-radius: 60px;}
  .user_top_center{width: 400px}
  .user_top_name{color: #7D7D7D;font-size: 35px;}
  .user_top_time{flex-direction: row;align-items: center;justify-content: flex-start;}
  .user_top_center_text{color: #7D7D7D;font-size: 35px;}

  .user_top_right{background-color: #DC7009;width: 140px;height: 55px;border-radius: 5px;align-items: center;justify-content: center;}
  .user_top_right_text{color: #ffffff;}
  /*第二部分*/
  .user_reward{margin-top: 14px;box-shadow: 0px 14px 0px rgba(0, 0, 0, 0.2);background-color: #fff;padding: 30px 0 40px 0;}
  .user_reward_show{flex-direction: row;align-items: center;justify-content: space-between;}
  .user_reward_showOn{width: 250px;justify-content: center;align-items: center;}
  .user_reward_showOn_title{color: #7D7D7D;font-size: 35px;}
  .user_reward_showOn_number{color: #DC7009;font-size: 35px;}
  .user_reward_left{}
  .user_reward_center{border-left-width: 1px;border-left-style: solid;border-left-color: #9E9F9F;border-right-width: 1px;border-right-style: solid;border-right-color: #9E9F9F;}
  .user_reward_right{}
  .user_reward_btn{border-width:1px;border-style: solid;border-color: #7D7D7D;width: 300px;height: 80px;margin-left: 225px;flex-direction: column;align-items: center;justify-content: center;margin-top: 50px;border-radius: 5px;}
  .user_reward_btn_text{color: #999;}
  /*第三部分*/
  .user_month{/*margin-top: 14px;*/box-shadow: 0px 14px 0px rgba(0, 0, 0, 0.2);background-color: #fff;}
  .user_month_icon{font-size: 50px;font-weight: bold;}
  .user_month_text{color: #7D7D7D;}
  .user_month_a{flex-direction: row;align-items: center;justify-content: space-between;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#9E9F9F;width: 750px;height: 100px;padding: 0 25px;}
  .user_month_this{margin-top: 14px;}
  .user_month_this_left{flex: 1;align-items: flex-start;}
  .user_month_this_right{flex: 1;flex-direction: row;align-items: flex-end;justify-content: flex-end;}
  .user_month_this_left_text{font-size: 35px;}
  .user_month_this_right_textMoney{color: #DC7009;font-size: 40px;}
  .user_month_this_right_textUnit{color: #DC7009;font-size: 30px;}
  /*第四部分*/
  .user_sub{/*margin-top: 14px;*/}
  .user_sub_a{flex-direction: row;align-items: center;justify-content: space-between;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#9E9F9F;width: 750px;height: 100px;padding: 0 25px;}
  .user_sub_friend{margin-top: 14px;}
  .user_sub_text{color: #7D7D7D;font-size: 35px;}
  .user_sub_text_right{font-size: 30px;}
  .user_sub_icon_left{font-size: 50px;margin-right: 15px;}
  .user_sub_icon_left_last{font-size: 50px;}
  .user_sub_icon_right{font-size: 50px;font-weight: bold;margin-left: 10px;}
  .user_sub_left{flex-direction: row;align-items: center;justify-content: flex-start;}
  .user_sub_right{flex-direction: row;align-items: center;justify-content: flex-end;}
  /*第五部分*/
  .user_qrcode{}
  .user_qrcode{width:750px;padding: 50px 0 20px;background-color: #F8F8F8;}
  .user_qrcode_img{width: 240px;height: 240px;border-width:1px;border-style: solid;border-color: rgb(0,0,0);margin-left: 255px;margin-bottom: 15px;}
  .user_qrcode_text{text-align: center;color:#7D7D7D;}
</style>
<script>
  // var me = this;
  var stream = weex.requireModule('stream');
  var shareModule = weex.requireModule('share');
  var modal = weex.requireModule('modal');
  const storage = weex.requireModule('storage');
  module.exports = {
    data () {
      return {
        money:'2000',
        friend:'1',
        reward:'100',
        login:'',
        weixin:'',
        keys:'[]',
        length:0,
      }
    },
    beforeCreate: function () {
      var domModule = weex.requireModule("dom");
      domModule.addRule('fontFace', {
        'fontFamily': "iconfont",
        'src': "url('http://at.alicdn.com/t/font_475407_agvgdhxied0zr529.ttf')"
      });

    },
    // created: function () {
    //   var me = this;
    //   stream.fetch({
    //     method:'GET',
    //     url:'https://www.fxm365.com/app/app.php?i=2&c=entry2&m=fy_lesson&do=newuser&op=index',
    //     type:'jsonp'
    //   }, function(ret) {
    //     if(!ret.ok){
    //       // me.getJsonpResult = "request failed";
    //       console.log("!ret.ok");
    //     }else{
    //       // console.log('get:'+ret);
    //       // me.getJsonpResult =  JSON.stringify(ret.data);
    //       console.log("ret.ok");
    //     }
    //   },function(response){
    //     // console.log('get jsonp in progress:'+response.length);
    //     // me.getJsonpResult = "bytes received:"+response.length;
    //     console.log("response");
    //   });
    // },
    // created:function(){
    //   var me = this;
    //   if (me.login == '') {
    //     var params = {
    //       'type': 'Weixin|QQ', 
    //     }
    //     shareModule.loginTo( params, function(rsl){
    //       console.log(rsl);
    //       me.login = rel;
    //       storage.setItem('weixin',rsl,e=>{
    //         console.log("setItem完成");
    //       })
    //       storage.getItem('weixin',e=>{
    //         me.login = 'weixin';
    //         console.log(me.login);
    //         modal.toast({
    //           message:me.login,
    //           duration:3
    //         });
    //       })
    //     });
    //     console.log("weixin是："+weixin);             
    //   }else{
    //     modal.toast({
    //       message:me.login,
    //       duration:0.8
    //     });
    //   }
    // },
    methods:{
      // b:function(e){
      //   var me = this;
      //   if (me.login == '') {
      //     var params = {
      //       'type': 'Weixin|QQ', 
      //     }
      //     shareModule.loginTo( params, function(rsl){
      //       console.log(rsl);
      //     });                 
      //   }else{
      //     modal.toast({
      //       message:"1",
      //       duration:0.8
      //     });                    
      //   }
      // },
      index:function(e){
        var me = this;
        storage.setItem('login1',this.login,event => {
          console.log('changed');
            modal.toast({
              message: this.login1
            });
          console.log(this.login1);
        })
      },
      setWeixin:function(e){
        var params = { 'type': 'Weixin|QQ', }
        shareModule.loginTo( params, function(rsl){
          // console.log(rsl);
          storage.setItem('name',rsl,event=>{
            console.log("setItem完成");
          })
        });
      },
      getWeixin:function(e){
        storage.getItem('name',event=>{
          modal.toast({
            message:event.data,
            duration:3
          });
          this.weixin = event.data;
        })
      },
      removeWeixin:function(e){
        storage.removeItem('name',event=>{
          this.weixin = "deleted";
        })
      },
      getUser:function(e){
        stream.fetch({
          method:'GET',
          url:'https://www.fxm365.com/app/app.php?i=2&c=entry2&m=fy_lesson&do=newuser&op=index&session=1',
          type:'jsonp'
        }, function(ret) {
          if(!ret.ok){
            // me.getJsonpResult = "request failed";
            console.log("!ret.ok");
            modal.toast({
              message:"!ret.ok",
              duration:3
            });
          }else{
            // console.log('get:'+ret);
            // me.getJsonpResult =  JSON.stringify(ret.data);
            console.log("ret.ok");
            modal.toast({
              message:"ret.ok",
              duration:3
            });
          }
        },function(response){
          // console.log('get jsonp in progress:'+response.length);
          // me.getJsonpResult = "bytes received:"+response.length;
          console.log("response");
            modal.toast({
              message:"response",
              duration:3
            });
        });
      }
    }
  }
</script>